import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import classname from "classname";
import List from "./list";
import Loading from "./loading";
import { getList } from "../../store/features/listSlice";

const Hots = () => {
    const [type, setType] = useState("baidu");
    const dispatch = useDispatch();
    const { loading } = useSelector((state) => state.hots);
    useEffect(() => {
        dispatch(getList(type));
    }, [type]);
    return (
        <>
            <div className="btn-group">
                <div
                    className={classname("btn btn-default", {
                        "btn-danger": type === "baidu",
                    })}
                    onClick={() => setType("baidu")}
                >
                    百度
                </div>
                <div
                    className={classname("btn btn-default", {
                        "btn-danger": type === "weibo",
                    })}
                    onClick={() => setType("weibo")}
                >
                    微博
                </div>
                <div
                    className={classname("btn btn-default", {
                        "btn-danger": type === "douyin",
                    })}
                    onClick={() => setType("douyin")}
                >
                    抖音
                </div>
            </div>
            <div className="result-wrapper" style={{ marginTop: 20 }}>
                {loading && <Loading />}
                {loading == false && <List />}
            </div>
        </>
    );
};

export default Hots;
